<template>
  <div>
    <NuxtLayout name="default">
      <template #panel>
        <!-- <TheSession /> -->
        <ElScrollbar
          class="w-[300px] px-[10px] py-[30px] "
          style="background-color: RGBA(38, 41, 50,0.4);"
          ref="scrollbarRef"
        >
          <div
            class="info flex flex-col items-center mb-[30px] text-[var(--color-btn-text)]"
          >
            <ElAvatar :size="40" :src="userInfo.avatar"></ElAvatar>
            <div class="mt-[20px] text-[18px]">
              {{ userInfo.nickname }}
            </div>
          </div>
          <div class="menu">
            <div
              class="menu-item flex items-center p-[10px] mt-2 cursor-pointer"
              :class="{
                actived: selectval == item.id,
                unactived: selectval != item.id,
              }"
              v-for="(item, index) in tabs"
              :key="index"
              @click="selectval = item.id"
            >
              <ElImage
                :src="item.image"
                class="w-[24px] h-[24px] rounded-[8px]"
              ></ElImage>
              <div class=" flex-1">
                <div class="font-bold">
                  {{ item.name }}
                </div>
                <ClientOnly>
                  <OverflowTooltip
                    teleported
                    class="text-tx-secondary"
                    :content="item.remarks"
                    :line="2"
                  >
                  </OverflowTooltip>
                </ClientOnly>
              </div>
            </div>
          </div>
        </ElScrollbar>
      </template>
      <div class="app-main w-full">
        <keep-alive>
          <component :is="currentComponent"></component>
        </keep-alive>
      </div>
    </NuxtLayout>
  </div>
</template>
<script lang="ts" setup>
import { ElAvatar, ElButton } from "element-plus";
import { getUserInfo, userEdit } from "@/api/user";
import CropperUpload from "@/components/cropper-upload/index.vue";
import PopoverInput from "@/components/popover-input/index.vue";
import Info from "./info.vue";
import Drawing from "./drawing.vue";
import Setting from "./setting.vue";
import { logout } from "~~/api/account";
import feedback from "~~/utils/feedback";
import { useUserStore } from "~~/stores/user";
import { drawing } from "api/drawing";
import drawingImg from '@/assets/images/icon/drawing.png'
import userImg from '@/assets/images/icon/user.png'
import settingImg from '@/assets/images/icon/setting.png'

//当前选中的侧边栏
const selectval = ref(0);
const currentComponent = computed(()=>{
  return tabs[selectval.value].component
})
const tabs = [
  {
    id: 0,
    image:drawingImg,
    name: "创作管理",
    mode: "drawing",
    component: markRaw(Drawing),
  },
  {
    id: 1,
    name: "账户信息",
    image:userImg,
    mode: "info",
    component: markRaw(Info),
  },
  {
    id: 2,
    name: "设置",
    image:settingImg,
    mode: "setting",
    component: markRaw(Setting),
  },
];


const userStore = useUserStore();

const userInfo = computed(() => {
  return userStore.userInfo;
});
// 用户资料
enum UserFieldEnum {
  NONE = "",
  AVATAR = "avatar",
  USERNAME = "account",
  NICKNAME = "nickname",
  SEX = "sex",
}

definePageMeta({
  module: "personal",
  auth: true,
});
</script>
<style lang="scss" scoped>
.menu-item {
  color: var(--color-btn-text);
  border-radius: 8px 8px 8px 8px;
  width: 268px;
  height: 40px;
}
.actived {
  background-color: #41444e;
}
.unactived {
}
</style>
